<template>
	<view class="bg-gray">
		<view class="width">
			<view class="bg-white boxin">
				<!-- <view class="boxitem">
					<u-upload
					    :file-list="legalPhotoFileList"
						radius='50%'
						uploadText='头像'
					    :header="{ accessToken: storage.getAccessToken() }"
					    :action="action"
					    width="200"
					    @on-uploaded="onUploaded($event, 'legalPhoto')"
					    :show-progress="false"
					></u-upload>
				</view> -->
				<view class="flex-row-between boxitem">
					小区选择 {{dataList}}
					<view @click="showPickerFun('CommunityList')">
						{{ CommunityListInfo.name || '请选择' }}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="flex-row-between boxitem">
					楼宇选择
					<view @click="showPickerFun('FloorList')">
						{{ FloorListInfo.name || '请选择' }}
						<u-icon name='arrow-right'></u-icon></view>
				</view>
				<view class="flex-row-between boxitem">
					房屋选择
					<view @click="showPickerFun('RoomlList')">
						{{ RoomlListInfo.name || '请选择' }}
						<u-icon name='arrow-right'></u-icon></view>
				</view>
				<view class="flex-row-between boxitem">
					联系人
					<input class="uni-input" v-model='userName' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					身份证号
					<input class="uni-input" v-model='idCard' placeholder="请输入" />
				</view>
				<view class="flex-row-between boxitem">
					电话
					<input class="uni-input" v-model='phone' placeholder="请输入" />
				</view>
				
				<view class="flex-row-between boxitem">
					短信验证码
					<input class="uni-input" v-model='smsCode' placeholder="验证码" />
					<u-verification-code unique-key="page-edit" :seconds="seconds"
						ref="uCode" @change="codeChange"></u-verification-code>        
					<view class="greencolor" @click="sendMsg">{{ tips }}</view>
				</view>
			</view>
			<view class="apply">
				<u-button type="primary" shape='circle' @click="apply">提交认证</u-button>
			</view>
		</view>
		
		<u-picker
		  v-model="showPicker"
		  :keyName='keyName'
		 :range='dataList'
		 mode="selector"
		@confirm="selectMode"></u-picker>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js";
	import { upload,sendSms } from "@/api/common.js";
	import { ownerApp } from "@/api/my/apply.js";
	export default {
		components: {
	
		},
		data(){
			return {
				typeCeng:null,//弹出层类型
				storage,
				action: upload, //图片上传数据
				legalPhotoFileList: [],
				dataList:[],//弹窗数据
				CommunityList:[],//所有小区
				keyName:'communityName',//弹窗自定义name
				FloorList:[],//所有楼宇
				RoomlList:[],//所有房间
				CommunityListInfo:{}, //小区信息
				FloorListInfo:{}, //楼宇信息
				RoomlListInfo:{}, //房间信息
				showPicker:false,//弹窗显示层
				userName:null,
				idCard:null,
				phone:null,
				smsCode:null,
				seconds: 60, //默认验证码等待时间
				tips:'',
			}
		},
		mounted() {
			this.getAllXiaoQu()
			this.getAllFloor()
			this.getAllRoom()
		},
		methods:{
			//申请按钮点击
			apply(){
				let data = {
					userName:this.userName,
					idCard:this.idCard,
					phone:this.phone,
					roomId:this.RoomlListInfo.id,
					profilePicture:this.profilePicture,
					id:storage.getUserInfo.id,
					userStatus:0,
					userType:0,
					smsCode:this.smsCode                 
				}
				ownerApp(data).then((res) => {
				});
			},
			/**
			 * 发送验证码
			 */
			codeChange(text) {
				this.tips = text;
			},
			sendMsg(){
				if(!this.phone){
					uni.showToast({
						title: "请填写手机号",
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				let data = {
					phone:this.phone,
					type:'0'
				}
				if (!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none", 
					});
					return false;
				}
				if (!this.flage || this.tips == "重新获取") {
					this.$refs.uCode.start();
					sendSms(data).then((res) => {
					});
				}
			},
			/**
			 * 获取所有小区
			*/
		    getAllXiaoQu(){
		    	this.$store.dispatch('AllCommunityList').then(res => {
		    		this.CommunityList = res
		    	})
		    },
			/**
			 * 获取所有楼宇
			*/
			getAllFloor(){
				this.$store.dispatch('AllFloorList').then(res => {
					this.FloorList = res
				})
			},
			/**
			 * 获取所有房宇
			*/
			getAllRoom(){
				this.$store.dispatch('AllRoomlList').then(res => {
					this.RoomlList = res
				})
			},
			/**
			 * 申请资料弹窗
			 */
			showPickerFun(type){
				this.typeCeng = type
				this.dataList = this[type]
				switch(type){
					case 'RoomlList':
						this.keyName = 'roomNo';
					break;
					case 'CommunityList':
						this.keyName = 'communityName';
					break;
					case 'FloorList':
						this.keyName = 'floorName';
					break;
				}
				this.showPicker = true
			},
			//弹窗确定点击
			selectMode(res){
				switch(this.typeCeng){
					case 'RoomlList':
						this.RoomlListInfo = {
							id:this.RoomlList[res].id,
							name:this.RoomlList[res].roomNo,
						}
					break;
					case 'CommunityList':
						this.CommunityListInfo = {
							id:this.CommunityList[res].id,
							name:this.CommunityList[res].communityName,
						}
					break;
					case 'FloorList':
						this.FloorListInfo = {
							id:this.FloorList[res].id,
							name:this.FloorList[res].floorName,
						}
					break;
				}
			}
		}
	}
</script>

<style scoped>
	.apply{
		margin-top: 40px;
	}
</style>